<template>
    <Card>
        <JG-search :searchData="searchData" @on-change-change="askDatas"/>
        <JG-table :loading="loading" :total="total" :columns="columns" :params="params" :data="data" @askData="askData"   @handleEdit="handleEdit"></JG-table>
        <Modal v-model="modalStatus" footer-hide>
            <div>
              <Table :columns="modalcolumns" :data="modalData" :loading="modalloading" :max-height="700"></Table>
            </div>
            <div style="margin-top: 10px;">
                <Page   size="small" :current.sync="currentPage" :total="modaltotal" :page-size="pageSize" :page-size-opts="pageSizeArray" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changePageSize"/>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import { getOperate, operateDetail,  } from '@api/menuclick';
    import util from '@/libs/util';
    export default {
    name: "",
    data() {
        const currentProject = util.storage.get("webcurrProject");
        return {
            searchData: {
                left: [
                    { id: 1, key: "DatePicker", type: "daterange", value: [new Date(), new Date()], clearable: true, placeholder: "请选择日期", callback: "change" },
                    { id: 2, key: "Select", value: currentProject, class: "curpor", style: { width: "140px" }, clearable: false, placeholder: "请选择项目", field: { label: "name", value: "value" }, childList: this.project, callback: "change" ,clearable:true },
                ]
            },
            loading: false,
            total: 0,
            columns: [
                { title: "菜单名称", key: "menu_name", minWidth: 120 },
                { title: "点击总数", slot: "operate", key: "click_num", minWidth: 180 },
                { title: "点击路由", key: "menu_url", minWidth: 180 },
            ],
            params: { project_id: "", start_time: "", end_time: "", page: 1, pageSize: 10 },
            data: [],
            project: util.storage.get("project"),
            id: "",
            modalStatus:false,
            modalcolumns:[
              { title: "时间", key: "created_at", width: 170 },
              { title: "操作人", key: "operate_member", width: 120 },
              { title: "ip", key: "ip", width: 120 },
              { title: "userAgent", key: "user_agent", minWidth: 200 },
            ],
            modalData:[],
            modalloading:false,
            currentPage: 1,
            modaltotal: 0,
            pageSize: 10,
            pageSizeArray: [10, 20, 50, 100],
        };
    },
    mounted() {
        this.searchData.left.forEach((item) => {
            if (item.id === 2) {
                item.childList = [];
                // this.project.forEach(it => {
                //     it.name = '项目:' + it.name
                // })

                item.childList = this.project;
                // console.log(item.childList, "childList");
            }
        });
        this.initial();
    },
    methods: {
        initial() {
            this.askData();
        },
        askDatas() {
            this.params.page = 1;
            this.askData();
        },
        askData() {
            this.searchData.left.forEach((item) => {
                if (item.id === 1) {
                    this.params.start_time = item.value[0] ? this.$Date(item.value[0]).format("YYYY-MM-DD") : "";
                    this.params.end_time = item.value[1] ? this.$Date(item.value[1]).format("YYYY-MM-DD") : "";
                }
                else if (item.id === 2) {
                    this.params.project_id = item.value;
                }
            });
            this.loading = true;
            getOperate(this.params).then(res => {
                this.data = res.list;
                this.total = res.total;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
        changePage (index) {
            this.currentPage = index;
            this.getclick()
        },
        changePageSize (val) {
            this.pageSize = val;
            this.getclick()
        },
        handleEdit(row) {
            this.currentPage = 1;
            this.pageSize=10;
            this.id = row.id;
            this.getclick()
            this.modalStatus=true

        },
        getclick(val){
            let params={
                page: this.currentPage,
                pageSize: this.pageSize,
                start_time:this.params.start_time,
                end_time:this.params.end_time,
                id:this.id
            }
           operateDetail(params).then(res => {
                this.modalData = res.list;
                this.modaltotal=res.total
               this.modalloading=false
              //  this.modalStatus=false
            }).catch(() => {
                this.modalloading=false
            });
        }
    },
}
</script>
<style lang="less" scope>
.curpor{
    width: 200px;
    position: relative;
}
.curpor .ivu-select-selected-value{
    padding-left: 45px !important;
}
 .curpor .ivu-select-selected-value::before{
    content: '项目:';
    position: absolute;
    z-index: 1;
    top:0;
    left: 10px;
}
 .ivu-modal-wrap .ivu-modal{
   width: 85% !important;
 }
</style>
